$(function () {
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    // 全局声明一个id
    var id = 1
    // 1. 获取左侧数据
    $.ajax({
        url: '/category/queryTopCategory',
        type: 'GET',
        success: function (res) {
            // console.log(res)
            // 渲染数据
            var html = template('left', res)
            // console.log(html)
            $('.main-left ul').html(html)
        }
    })

    // 2. 获取右侧数据
    function getRight() {
        $.ajax({
            url: '/category/querySecondCategory',
            type: 'GET',
            data: {
                id: id
            },
            success: function (res) {
                // console.log(res)
                // 额外的步骤 如果没有数据返回，那么提示用户暂无数据
                if (res.total == 0) {
                    $('.main-right ul').html('<h3>该分类下还没有商品哦~</h3>')
                } else {
                    // 渲染数据
                    var html = template('right', res);
                    // console.log(html)
                    $('.main-right ul').html(html)
                }
            }
        })

    }
    getRight()
    // 3. 点击左侧一级分类切换右侧二级分类
    $('.main-left').on('tap', 'li', function () {
        // 1.获取自定义id的值
        // console.log(this.dataset.id)
        console.log($(this).data('id'))
        id = $(this).data('id')
        // 2. 重新渲染右侧数据
        getRight()
        // 更新当前li的样式
        $(this).addClass('active').siblings().removeClass('active')
    })
})